<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大事件-后台首页</title>
  <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery-1.12.4.min.js"></script>
</head>

<body>
<div class="sider">
  <a href="#" class="logo">
    <img src="images/logo02.png" alt="logo">
  </a>
  <div class="user_info">
    <img src="images/2.jpg" alt="person">
    <span>欢迎&nbsp;&nbsp;李思思</span>
    <b>管理员</b>
  </div>
  <div class="menu">
    <div class="level01 active">
      <a href="main_count.html" target="main_frame">
        <i class="iconfont icon-yidiandiantubiao04"></i>
        <span>首页</span>
      </a>
    </div>
    <div class="level01">
      <a href="#">
        <i class="iconfont icon-icon-article"></i>
        <span>文章管理</span>
        <b
                class="iconfont icon-arrowdownl"></b>
      </a>
    </div>
    <ul class="level02">
      <li>
        <a href="article_list.html" target="main_frame">
          <i class="iconfont icon-previewright"></i>
          <span>文章列表</span>
        </a>
      </li>
      <li>
        <a href="article_release.html" target="main_frame">
          <i class="iconfont icon-previewright"></i>
          <span>发表文章</span>
        </a>
      </li>
      <li>
        <a href="article_category.html" target="main_frame">
          <i class="iconfont icon-previewright"></i>
          <span>文章类别管理</span>
        </a>
      </li>
    </ul>

    <div class="level01">
      <a href="comment_list.html" target="main_frame">
        <i class="iconfont icon-comment"></i>
        <span>评论管理</span>
      </a>
    </div>
    <div class="level01">
      <a href="user.html" target="main_frame">
        <i class="iconfont icon-user"></i>
        <span>个人中心</span>
      </a>
    </div>
  </div>
</div>

<div class="header_bar">
  <form class="search_form">
    <input type="text" placeholder="请输入搜索内容">
    <i class="iconfont icon-search"></i>
  </form>
  <div class="user_center_link">
    <a href="user.html" onclick="setMenu(3,0)" target="main_frame">个人中心</a>
    <img src="images/2.jpg" alt="person">
    <a href="#" id="logout">
      <i class="iconfont icon-tuichu"></i>
      退出
    </a>
  </div>
</div>

<div class="main" id="main_body">
  <iframe src="main_count.html" frameborder="0" id="main_frame" name="main_frame" frameborder="0"
          scrolling="auto"></iframe>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">系统提示</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="sureLogout">确定</button>
      </div>
    </div>
  </div>
</div>
<script>
  var $level01 = $('.level01');
  var $subli = $('.level02 li')
  $level01.click(function () {
    $level01.not($(this)).removeClass('active');
    $(this).addClass('active');

    if ($(this).next().hasClass('level02')) {
      $(this).next().slideToggle();
      $(this).find('b').toggleClass('rotate0');
    } else {
      $subli.removeClass('active');
    }
  })

  $subli.click(function () {
    $subli.not($(this)).removeClass('active');
    $(this).addClass('active');

    if (!$(this).parent().prev().hasClass('active')) {
      $level01.removeClass('active');
      $(this).parent().prev().addClass('active');
    }
  })

  function resizeFrame() {
    var frame_w = $('#main_body').outerWidth();
    var frame_h = $('#main_body').outerHeight();
    $('#main_frame').css({ 'width': frame_w, 'height': frame_h });
  }

  resizeFrame();

  $(window).resize(function () {
    resizeFrame();
  })


  function setMenu(m, n) {
    $level01.eq(m).addClass('active').siblings().not('.level02').removeClass('active');
    if (m != 1) {
      $('.level02').slideUp();
    } else {
      $('.level02').slideDown();
      $('.level02').children().eq(n).addClass('active').siblings().removeClass('active');
    }
  }

</script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script !src="">
  function load() {
    //获取用户信息
    $.ajax({
      url: 'http://localhost:8080/admin/user/info',
      method: 'get',
      dataType: 'json',
      data: {},
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 200) {
          $('.user_info span').text('欢迎  ' + data.data.nickname);
          $('img[alt="person"]').attr('src', data.data.userPic);
        } else {
          console.log('获取失败')
        }
      }
    })
  }

  $(function () {
    function showModel(msg) {
      $('#myModal').modal(
        {
          keyboard: false
        }
      )
      $('.modal-body').text(msg)
    }

    load();

    //退出登录
    $('body').on({
      click: function (e) {
        // 动态委派
        console.log('click', '#logout');
        if (confirm('确定退出?')) {

          $.ajax({
            url: 'http://localhost:8080/admin/user/logout',
            method: 'post',
            dataType: 'json',
            data: {},
            // data: formData,
            success: function (data) {
              console.log('ajax结果', data);
              if (data.code === 200) {
                location.replace('./login.html')
              } else {
                showModel(data.msg)
              }
            }
          })
        }
        e.preventDefault();
      }
    }, '#logout');
  })
</script>
</body>
</html>